<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="uuuname"><input type="checkbox" id="remember">记住用户名
    <script>


        var uuuname = document.querySelector('#uuuname')
        var remember = document.querySelector('#remember')
        // localStorage.clear()
        if (localStorage.getItem('uuuname')) {//判断本地是否有这个名为uuuname的数据
            // 这一步写了只要用户输入了数据 后台都会有记录 跟本案例再次打开页面在文本框显示上次输入的内容 性质不一样
            uuuname.value = localStorage.getItem('uuuname')//如果有就把数据取过来赋值到文本框里 利用了localStorage永久生命周期的特性 达到了即便关闭浏览器 只要是存储过的数据 再次打开浏览器就会直接显示在文本框
            remember.checked = true// 让用户自行选择 利用下面的change事件 在存储前如果选中checked则重新打开页面显示上次文本框输入过的内容 反之不显示上次输入内容
        }
        // change事件 检测checked的状态（是否被选中）
        remember.addEventListener('change', function () {
            if (this.checked) {//如果当前被选中
                localStorage.setItem('uuuname', uuuname.value)//就将数据存储到本地 再次打开页面就会被显示出来
            } else {
                localStorage.removeItem('uuuname')//如果没被选中 则移除数据 注意是remove 不要用clear
            }






        })


    </script>
</body>

</html>